.bar(@width, @height, @bgColor, @isLeft) {
  width: @width;
  height: @height;
  background-color: @bgColor;
  position: fixed;
  @{isLeft}: 0;
  top: 50%;
  padding: 0.5rem;
  box-sizing: border-box;
  text-align: center;
  margin-top: -@height/2;
  z-index: 999;
}

.left-bar {
  .bar(3rem, 13rem, rgba(255, 0, 0, 0.5), left);
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 1rem;

  li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(44, 44, 44, 0.3);

    a {
      color: #fff;
    }
  }

  li:hover {
    background-color: rgba(249, 95, 60, 0.7);

    a {
      color: yellow;
    }
  }
}

.right-bar {
  .bar(3rem, 10rem, rgba(255, 0, 0, 0.5), right);
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  li {
    padding: .2rem;
    box-sizing: border-box;
    border-radius: 0.2rem;

    img {
      display: block;
      width: 1.5rem;
      height: auto;
    }

    a {
      color: #fff;
    }
  }

  li:hover {
    background-color: rgba(221, 249, 60, 0.7);

    a {
      color: red;
    }
  }
}